<template>
  <div>
    <el-row>
      <el-col :span="12">
        <span>{{ role.roleName }} 权限</span>
      </el-col>
      <el-col :span="12" class="t-r">
        <el-button @click="goBack">返回</el-button>
      </el-col>
    </el-row>
    <el-tree
      ref="tree"
      :data="rightsData"
      show-checkbox
      default-expand-all
      node-key="id"
      :props="{label: 'authName'}"
      :default-checked-keys="rightsOfRole"
      check-strictly
      @check="handleCheck"
    />
    <el-row>
      <el-col class="t-c">
        <el-button type="primary" @click="onSumbit">提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getRights, detailRole, postRoleRight, getRoles } from '@/api/rights'
import { rights } from '@/api/permission'

const initCheckedKeys = []

function getIds(objArr, res) {
  return objArr.reduce((res, item) => {
    if (item.hasOwnProperty('children')) {
      getIds(item.children, res)
    }
    res.push(item.id)
    return res
  }, res)
}

export default {
  name: 'ROLERIGHT',
  data() {
    return {
      rightsData: [],
      roleId: '',
      role: {},
      checkedKeys: [],
      allRoles: [],
      rightsOfRole: []
    }
  },
  watch: {
  },
  created() {
    this.roleId = this.$route.params.roleId
    this.init()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    init() {
      Promise.all([this.getRights(), this.getRightsOfRole(), this.getDetailRole(this.roleId)]).then(res => {
        const [rights, rightsOfRole, detailRole] = res
        this.rightsData = rights
        this.role = detailRole
        this.$nextTick(() => {
          this.rightsOfRole = getIds(rightsOfRole, [])
        })
      })
    },
    /**
     * 角色 拥有的权限
     */
    getRightsOfRole() {
      return new Promise((resolev, reject) => {
        getRoles().then(res => {
          const role = res.find(i => i.id === Number(this.roleId))
          resolev(role.children)
        }).catch(err => {
          reject(err)
        })
      })
    },
    setChecked() {
      setTimeout(() => {
        this.$refs.tree.setCheckedKeys(this.initCheckedKeys)
      }, 6000)

      this.$nextTick(() => {
        console.log('initCheckedKeys:::', this.initCheckedKeys)
      })
    },
    /**
     * 所有权限
     */
    getRights() {
      return new Promise((resolev, reject) => {
        getRights().then(res => {
          resolev(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /**
     * 角色 详情 (不包括拥有的权限)
     */
    getDetailRole(roleId) {
      return new Promise((resolev, reject) => {
        detailRole(roleId).then(res => {
          resolev(res)
        }).then(err => {
          reject(err)
        })
      })
    },
    handleCheck(current, selected) {
      this.checkedKeys = [...selected.checkedKeys, ...selected.halfCheckedKeys]
    },
    async onSumbit() {
      const data = {
        roleId: this.roleId,
        rids: this.checkedKeys.join(',')
      }
      await postRoleRight(data)
      this.$message({
        message: '权限更新成功',
        type: 'success'
      })
      this.goBack()
    }
  }
}
</script>
